<template>
  <div class="demo-content">
    <div class="demo-content-datgui"></div>
    <div class="map-warp" ref="map"></div>
  </div>
</template>
<script>
  import 'mapbox-gl/dist/mapbox-gl.css'

  export default {
    name: 'mapbox-wind-base',
    data() {
      return {};
    },
    watch: {},
    methods: {
      async initMap() {
        const mapboxgl = await import('mapbox-gl').then(res => res.default);

        const { WindLayer, ScalarFill } = await import('@sakitam-gis/mapbox-wind');

        mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';

        const map = new mapboxgl.Map({
          container: this.$refs.map,
          style: {
            version: 8,
            sources: {
              carto: {
                type: 'raster',
                tiles: [
                  '//a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
                  '//b.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
                  '//c.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
                  '//d.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
                ],
                tileSize: 256,
                // minzoom: 1,
                // maxzoom: 18,
              },
            },
            layers: [
              {
                id: 'carto',
                type: 'raster',
                source: 'carto',
                // minzoom: 1,
                // maxzoom: 22,
                paint: {
                  'raster-resampling': 'nearest',
                  'raster-fade-duration': 0,
                },
              },
              {
                id: 'background',
                type: 'background',
                layout: {
                  visibility: 'none',
                },
              },
            ],
          },
          center: [113.53450137499999, 34.44104525],
          zoom: 4
        });

        const color = {
          temp: [[203,[115,70,105,255]],
            [218,[202,172,195,255]],
            [233,[162,70,145,255]],
            [248,[143,89,169,255]],
            [258,[157,219,217,255]],
            [265,[106,191,181,255]],
            [269,[100,166,189,255]],
            [273.15,[93,133,198,255]],
            [274,[68,125,99,255]],
            [283,[128,147,24,255]],
            [294,[243,183,4,255]],
            [303,[232,83,25,255]],
            [320,[71,14,0,255]]],
          wind: [
            [0,[98,113,183,255]],
            [1,[57,97,159,255]],
            [3,[74,148,169,255]],
            [5,[77,141,123,255]],
            [7,[83,165,83,255]],
            [9,[53,159,53,255]],
            [11,[167,157,81,255]],
            [13,[159,127,58,255]],
            [15,[161,108,92,255]],
            [17,[129,58,78,255]],
            [19,[175,80,136,255]],
            [21,[117,74,147,255]],
            [24,[109,97,163,255]],
            [27,[68,105,141,255]],
            [29,[92,144,152,255]],
            [36,[125,68,165,255]],
            [46,[231,215,215,255]],
            [51,[219,212,135,255]],
            [77,[205,202,112,255]],
            [104,[128,128,128,255]]
          ],
        };

        map.on('load', () => {
          fetch(this.$withBase('/data/wind.json'))
            // fetch('./data/wind.json')
            .then(res => res.json())
            .then(data => {
              console.log(data);

              // data = data.map((item, idx) => {
              //   item.header = Object.assign(item.header, {
              //     parameterCategory: 1,
              //     parameterNumber: idx === 0 ? 2 : 3,
              //   });
              //   return item;
              // });

              const windInterpolateColor = color.wind.reduce((result, item, key) => result.concat(item[0], 'rgba(' + item[1].join(',') + ')'), []);

              const fillLayer = new ScalarFill('wind-fill', {
                // "type": "jsonArray",
                // "data": data,
                "type": "image",
                "url": this.$withBase('/data/var_ugrd-var_vgrd.png'),
                "extent": [
                  [-180, 85.051129],
                  [-180, -85.051129],
                  [180, 85.051129],
                  [180, -85.051129],
                ],
                "width": 1440,
                "height": 720,
                "uMin": -21.34380340576172,
                "uMax": 30.7261962890625,
                "vMin": -23.916271209716797,
                "vMax": 24.693727493286133,
              }, {
                styleSpec: {
                  'fill-color': [
                    'interpolate',
                    ['linear'],
                    ['get', 'value'],
                    ...windInterpolateColor
                  ],
                  'opacity': [
                    'interpolate',
                    ['exponential', 0.5],
                    ['zoom'],
                    5,
                    1,
                    8,
                    1
                  ],
                },
                renderForm: 'rg',
              });

              map.addLayer(fillLayer);

              window.windLayer = new WindLayer('wind', data, {
                windOptions: {
                  // colorScale: (m) => {
                  //   // console.log(m);
                  //   return '#fff';
                  // },
                  // colorScale: [
                  //   "rgb(36,104, 180)",
                  //   "rgb(60,157, 194)",
                  //   "rgb(128,205,193 )",
                  //   "rgb(151,218,168 )",
                  //   "rgb(198,231,181)",
                  //   "rgb(238,247,217)",
                  //   "rgb(255,238,159)",
                  //   "rgb(252,217,125)",
                  //   "rgb(255,182,100)",
                  //   "rgb(252,150,75)",
                  //   "rgb(250,112,52)",
                  //   "rgb(245,64,32)",
                  //   "rgb(237,45,28)",
                  //   "rgb(220,24,32)",
                  //   "rgb(180,0,35)"
                  // ],
                  // velocityScale: 1 / 20,
                  // paths: 5000,
                  frameRate: 16,
                  maxAge: 60,
                  globalAlpha: 0.9,
                  velocityScale: 0.01,
                  // paths: 10000,
                  paths: 3782,
                },
              });

              console.log(map, window.windLayer);

              // map.addLayer(window.windLayer);
              window.windLayer.addTo(map);
            });
        });
      }
    },
    mounted() {
      this.initMap();
    },
  };
</script>

<style lang="less">
  .demo-content {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #cbe0ff;
    &-datgui {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 1;
      pointer-events: auto;
    }

    .map-warp {
      width: 100%;
      height: 100%;
    }
  }
</style>
